import React from 'react'
import styled from 'styled-components'
import { Form, Input, Button, message, Row, Col } from 'antd'

const LoginBg = styled.div`width: 100%; height: 100vh; min-height: 600px; background: url(${require('@/assets/login_bg.jpg')}) no-repeat center; background-size: cover; position: relative;`
const Logo = styled.div`float: left; margin-top: 35px;`
const H1 = styled.h1`text-align: center;`
const FormBox = styled.div`width: 400px; background: #fff; border-radius: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 30px 30px 10px;`

class Login extends React.Component {
    state = {
        loading: false,
        codeUrl: ''
    }

    // 判断该账号是否需要验证码
    isShowCode = async () => {
        const res = await React.$axios.get(`/Marketor/HadVerifyCode?user=${this.props.form.getFieldValue('username')}`)

        if (res.code) {
            this.getCode()
        } else {
            this.setState({ codeUrl: '' })
        }
    }

    // 获取验证码
    getCode = () => {
        const codeUrl = `${React.$axios.defaults.baseURL}/Marketor/CreateImg?username=${this.props.form.getFieldValue('username')}&time=${new Date().getTime()}`

        this.setState({ codeUrl })
    }

    // 提交表单登录
    handleSubmit = ev => {
        ev.preventDefault()

        this.props.form.validateFields(async (err, form) => {
            // 表单验证通过
            if (!err) {
                this.setState({loading: true})

                const res = await React.$axios.get(`/Marketor/Login?username=${form.username}&password=${form.password}&verifcode=${form.code}`)
                
                message.info(res.message)

                if (res.code === 1) {
                    // 登录成功保存token跳转首页
                    localStorage.setItem('token', res.token)
                    this.props.history.replace('/')

                    return
                }

                this.setState({loading: false})

                // 是否显示验证码
                if (res.showcode) this.getCode()
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form

        return (
            <LoginBg className="login">
                <div>
                    <div className="wrapper">
                        <Logo>
                            <img src={ require('@/assets/login_logo.png') } alt="" />
                        </Logo>
                        <div className="clear"></div>
                    </div>
                </div>
                <FormBox>
                    <H1>专题页管理后台</H1>
                    <Form onSubmit={ this.handleSubmit } className="login-form">
                        <Form.Item>
                            {getFieldDecorator('username', {
                                rules: [{ required: true, message: '请输入用户名!' }],
                            })(
                                <Input allowClear onBlur={ this.isShowCode } placeholder="用户名" />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入密码!' }],
                            })(
                                <Input.Password allowClear placeholder="密码" />
                            )}
                        </Form.Item>
                        {(() => {
                            if (this.state.codeUrl) {
                                return <Form.Item>
                                    <Row gutter={ 8 }>
                                        <Col span={ 18 }>
                                            {getFieldDecorator('code', {
                                                rules: [{ required: true, message: '请输入验证码!' }],
                                            })(
                                                <Input allowClear placeholder="验证码" />
                                            )}
                                        </Col>
                                        <Col span={ 6 }>
                                            <img onClick={ this.getCode } src={ this.state.codeUrl } alt="" />
                                        </Col>
                                    </Row>
                                </Form.Item>
                            }
                        })()}
                        <Form.Item>
                            <Button loading={ this.state.loading } type="primary" htmlType="submit" className="login-form-button">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </FormBox>
            </LoginBg>
        )
    }
}

export default Form.create()(Login)